<template>
	
	<div class="openCou">
		<fullscreen :fullscreen.sync="fullscreen">
		      
			  <div style="z-index: 100;color: #FFFFFF;text-align: center;">Content</div>
		</fullscreen>
		<img class="login" src="../../assets/lai.png" />
		<i class="el-icon-rank fang" @click="full"></i>
		<div class="cen center">
			<div style="font-size: 75px;">{{name}}</div>
			<el-button class="readyGo" @click="open">
				准备好了
				<i class="el-icon-caret-right"></i>
			</el-button>
			<div style="font-size: 25px;margin-top: 60px;">
				启用连胜奖励
				<el-switch :width="50" v-model="form.delivery" 
					active-color="#ffffff" 
					inactive-color="#ffffff"></el-switch>
					<span class="open" v-if="form.delivery == true">开</span>
					<span v-else class="guan">关</span>
			</div>
			<div style="font-size: 25px;margin-top: 20px; position: relative;">
				启用连续答题
				<el-switch :width="50" v-model="form.timu" active-color="#ffffff" inactive-color="#ffffff"></el-switch>
				<span class="open" v-if="form.timu == true">开</span>
				<span v-else class="guan">关</span>
			</div>
		</div>
	</div>
</template>

<script>
	import fullscreen from 'vue-fullscreen'
	export default {
		components:{fullscreen},
		data(){
			return {
				name:'',
				form:{
					delivery:'',
					timu:''
				},
				fullscreen: false

			}
		},
		created() {
			this.name = this.$route.query.name
		},
		methods:{
			open(){
				// let routeData = 'http://localhost:8080/#/lAL'
				// window.open(routeData, '_blank')
				this.$router.push({path:'/lAL'})
			},
			//放大全屏
			full(){
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
					// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
				
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.open{
		position: absolute;
		font-size: 14px;
		margin-left: -18px;
		color: #c1c1c1;
		margin-top: 9px;
	}
	.guan{
		position: absolute;
		font-size: 14px;
		margin-left: -45px;
		color: #c1c1c1;
		margin-top: 9px;
	}
	.readyGo {
	    width: 376px;
	    height: 76px;
	    font-size: 2.4em;
	    color: #E07625;
		background-color: #ffd766;
	    border-radius: 0.4em;
	    background-size: 7.541% 46.667%;
	    box-shadow: 0 0.24em #e9a56a;
	    line-height: 50px;
		margin-top: 100px;
	}
	.cen{
		z-index: 100;
		margin-top: 250px;
		color: #FFFFFF;
		
	}
	.fang{
		width: 60px;
		height: 60px;
		position: absolute;
		right: 10px;
		top: 40px;
		z-index: 100;
		color: #FFFFFF;
		font-size: 30px;
	}
	.login{
		position: absolute;
		z-index: 100;
		top: 40px;
		left: 40px;
		width: 120px;
		height: 40px;
	}
	.openCou{
		background-color: #515bd2;
		width: 100%;
		height: 100%;
		position: fixed;
	}
</style>
